
<template>

  <div class="container">
    <div class="top">
      <div id="myChart"></div>
      <div id="pieChart"></div>
      <div id="discountChart"></div>
    </div>


    <div class="bottom">
      <div id="instrumentChart"></div>
      <div id="mapChart"></div>
      <div ></div>
    </div>

  </div>
<!--  <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>-->
</template>


<script>
import { defineComponent, toRefs, reactive, onMounted, inject, ref } from "vue";
export default defineComponent({
  name: 'Histogram',
  setup() {
    //获取 app中provide中传递的Echarts实例对象
    let $echarts = inject('echarts')

    const columnOption = {
      title: { text: '柱状图',left: 'center' }, // 设置标题
      xAxis: { data: ['A', 'B', 'C', 'D'] }, // X轴数据
      yAxis: {}, // Y轴配置项（可根据需求自定义）
      series: [{ type: 'bar', data: [5, 20, 36, 10] }], // 系列类型为柱状图，数据为[5, 20, 36, 10]
    };

    const picOption = {
      title: {
        text: '饼图',
        left: 'center'
      },
      tooltip: {},
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            formatter: '{b}: {c} ({d}%)'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ]
        }
      ]
    };

    const instrumentOption = {
      title: {
        text: '仪表盘',
        left: 'center'
      },
      color: ["#37A2DA", "#32C5E9", "#67E0E3"],
      series: [
        {
          name: "业务指标",
          type: "gauge",
          detail: {
            formatter: "{value}%",
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 30,
              shadowBlur: 0,
              color: [
                [0.3, "#67e0e3"],
                [0.7, "#37a2da"],
                [1, "#fd666d"],
              ],
            },
          },
          data: [
            {
              value: 50,
              name: "完成率",
            },
          ],
        },
      ],
    };

    const discountOptions = {
      title: { text: '折线图' },
      xAxis: { data: ['周一', '周二', '周三', '周四', '周五'] },
      yAxis: {},
      series: [{ type: 'line', data: [5, 20, 36, 10, 7] }],
    };

    const mapOption = {

    };


    //柱状图
    const initeCharts = () => {
      const chart1 = document.getElementById("myChart");
      //解决路由切换时候echarts不显示的问题
      chart1.removeAttribute("_echarts_instance_");
      let myChart = $echarts.init(chart1)
      // 绘制图表
      myChart.setOption(columnOption)
    }
    //饼图
    const pieChart = () => {
      const chart = document.getElementById("pieChart");
      chart.removeAttribute("_echarts_instance_");
      let myChart = $echarts.init(chart)
      // 绘制图表
      myChart.setOption(picOption)
    }
    //折线图
    const discountChart = () => {
      const chart = document.getElementById("discountChart");
      chart.removeAttribute("_echarts_instance_");
      let myChart = $echarts.init(chart)
      // 绘制图表
      myChart.setOption(discountOptions)
    }

    //仪表盘
    const instrumentChart = () => {
      const chart = document.getElementById("instrumentChart");
      chart.removeAttribute("_echarts_instance_");
      let myChart = $echarts.init(chart)
      // 绘制图表
      myChart.setOption(instrumentOption)
    }

    const mapChart = () => {
      const chart = document.getElementById("mapChart");
      chart.removeAttribute("_echarts_instance_");
      let myChart = $echarts.init(chart)
      // 绘制图表
      myChart.setOption(mapOption)
    }

    onMounted(() => {
      initeCharts()
      pieChart()
      discountChart()
      instrumentChart()
      mapChart()
    })
  },
})

</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  flex-wrap: wrap;
  .top {
    //border: 1px solid red;
    height: 50%;
    display: flex;
    justify-content: space-between;
    div {
      //background-color: #1f2d3d;
      width: 33%;
    }
  }
  .bottom {
    //border: 1px solid blue;
    height: 50%;
    justify-content: space-between;
    display: flex;
    div {
      //background-color: #97a8be;
      width: 33%;
    }
  }
}



</style>